<template>
    <div>
        <div>
            城市：
            <Select v-model="searchData.city" filterable style="width: 150px;">
                <Option :value="val.city_id" v-for="val in searchCityList" :key="val.city_id">{{ val.city_name }}</Option>
            </Select>
            姓名:
            <Input type="text" v-model="searchData.username" style="width: 150px;" clearable />
            手机号:
            <Input type="text" v-model="searchData.mobile" style="width: 150px;" clearable />
            身份：
            <Select v-model="searchData.user_type" style="width: 150px;">
                <Option :value="0">陪驾教练</Option>
                <Option :value="1">验车师</Option>
                <Option :value="2">陪驾教练+验车师</Option>
            </Select>
            时间：
            <Date-picker type="date" placeholder="开始日期" v-model="searchData.start_time"></Date-picker> -
            <Date-picker type="date" placeholder="结束日期" v-model="searchData.end_time"></Date-picker>
            <Button type="primary" @click="search()" style="margin-left: 10px;">搜索</Button>
            <Button @click="reset()" style="margin-left: 10px;">重置</Button>
            <Button type="info" @click="edit(false, 0)" style="margin-left: 10px;">添加</Button>
        </div>
        <div style="margin-top: 10px;">
            <Table :columns="columns" :data="list" max-height="800" border stripe size="small">
                <template slot-scope="{ row , index}" slot="wxSlot">
                    <img :src="row.wx_img">
                </template>
                <template slot-scope="{ row , index}" slot="makeSlot">
                    <Row>
                        <Button type="success" @click="edit(row, 1)" size="small">详情</Button>
                        <Button type="info" @click="edit(row, 0)" size="small" style="margin-left: 1px;">编辑</Button>
                        <Button type="error" @click="del(row.id)" size="small" style="margin-left: 1px;">删除</Button>
                    </Row>
                    <Row style="margin-top: 3px;">
                        <Button type="success" @click="area(row.city, row.id)" size="small">添加区域</Button>
                        <Button type="warning" @click="status(row.id, 0)" style="margin-left: 1px;" size="small"
                            v-if="row.is_forbid == 0">不可接单</Button>
                        <Button type="primary" @click="status(row.id, 1)" style="margin-left: 1px;" size="small"
                            v-if="row.is_forbid == 1">可接单</Button>
                    </Row>
                </template>
            </Table>
        </div>

        <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize" :currentPage="searchData.page">
        </Paginate>

        <!-- 编辑 -->
        <Modal :title="formItem.id > 0 ? '修改用户' : '添加用户'" v-model="editModal" :width="56"
            :footer-hide="!!formItem.is_detail" :mask-closable="false">
            <Form :model="formItem" :label-width="100">
                <Row>
                    <FormItem label="类型">
                        <RadioGroup v-model="formItem.user_type">
                            <Radio :label="0" border>陪驾</Radio>
                            <Radio :label="1" border>验车</Radio>
                            <Radio :label="2" border>陪驾+验车</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="姓名">
                        <Input v-model="formItem.username" maxlength="15"></Input>
                    </FormItem>
                    <FormItem label="手机号">
                        <Input v-model="formItem.mobile" maxlength="11"></Input>
                    </FormItem>
                    <!-- <FormItem label="密码" v-if="!formItem.is_detail">
                        <Input v-model="formItem.password"></Input>
                    </FormItem> -->
                    <FormItem label="生日">
                        <Date-picker type="date" placeholder="" v-model="formItem.birthday"></Date-picker>
                    </FormItem>
                    <FormItem label="驾龄">
                        <Date-picker type="date" placeholder="" v-model="formItem.drive_time"></Date-picker>
                    </FormItem>
                    <FormItem label="城市">
                        <Select v-model="formItem.city" filterable @on-change="cityChange" :label-in-value="true">
                            <Option :value="val.id" v-for="val in cityList" :key="val.id">{{ val.name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="详细地址">
                        <!-- <Input v-model="formItem.address" type="text" @on-focus="showMapModal = true"></Input> -->
                        <Input v-model="formItem.address" type="text"></Input>
                    </FormItem>
                    <FormItem label="简介">
                        <Input v-model="formItem.intro"></Input>
                    </FormItem>
                    <FormItem label="品牌">
                        <Input v-model="formItem.brand"></Input>
                    </FormItem>
                    <FormItem label="车牌号">
                        <Input v-model="formItem.cart_number"></Input>
                    </FormItem>
                    <!-- <FormItem label="变速箱类型">
                        <Input v-model="formItem.gears"></Input>
                    </FormItem> -->
                    <FormItem label="动力类型">
                        <Input v-model="formItem.type"></Input>
                    </FormItem>
                    <!-- <FormItem label="里程">
                        <Input v-model="formItem.mileage"></Input>
                    </FormItem> -->
                    <!-- <FormItem label="排量">
                        <Input v-model="formItem.cc"></Input>
                    </FormItem> -->
                    <FormItem label="体验课时费(元)">
                        <Input v-model="formItem.trial_class_amount" type="number"></Input>
                    </FormItem>
                    <FormItem label="正式课时费(元)">
                        <Input v-model="formItem.class_amount" type="number"></Input>
                    </FormItem>
                    <FormItem label="验车佣金(%)">
                        <Input v-model="formItem.check_car_amount" type="number"></Input>
                    </FormItem>
                    <FormItem label="车型">
                        <RadioGroup v-model="formItem.shape">
                            <Radio label="轿车" border>轿车</Radio>
                            <Radio label="SUV" border>SUV</Radio>
                        </RadioGroup>
                    </FormItem>
                    <!-- <FormItem label="状态" v-if="!formItem.is_detail">
                        <RadioGroup v-model="formItem.status">
                            <Radio :label="0" border>冻结</Radio>
                            <Radio :label="1" border>正常</Radio>
                        </RadioGroup>
                    </FormItem> -->
                    <FormItem label="服务次数">
                        <Input v-model="formItem.service_num" type="number"></Input>
                    </FormItem>
                    <!-- <FormItem label="转化率">
                        <Input v-model="formItem.ratio" type="text"></Input>
                    </FormItem> -->
                    <FormItem label="排序">
                        <Row>
                            <Input v-model="formItem.sort" type="number" style="width: 150px;"></Input>
                            <Alert type="info">教练从大到小排序</Alert>
                        </Row>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="头像" class="item">
                        <MyUpload :maxNumber="1" @getImages="getImg0" :defaultImags="[formItem.avatar]">
                        </MyUpload>
                    </FormItem>
                    <FormItem label="车身照" class="item">
                        <MyUpload :maxNumber="1" @getImages="getImg" :defaultImags="[formItem.cart_img]">
                        </MyUpload>
                    </FormItem>
                    <FormItem label="工作证" class="item">
                        <MyUpload :maxNumber="1" @getImages="getImg1" :defaultImags="[formItem.work_img]">
                        </MyUpload>
                    </FormItem>
                    <FormItem label="身份证正面" class="item">
                        <MyUpload :maxNumber="1" @getImages="getImg2" :defaultImags="[formItem.id_card_front]">
                        </MyUpload>
                    </FormItem>
                    <FormItem label="驾驶证" class="item">
                        <MyUpload :maxNumber="1" @getImages="getImg4" :defaultImags="[formItem.drive_img]">
                        </MyUpload>
                    </FormItem>
                    <FormItem label="行驶证" class="item">
                        <MyUpload :maxNumber="1" @getImages="getImg5" :defaultImags="[formItem.travel_img]">
                        </MyUpload>
                    </FormItem>
                </Row>
                <FormItem label="备注">
                    <Input v-model="formItem.remark" type="textarea"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" size="large" long @click="editModalOk">提交</Button>
            </div>
        </Modal>

        <!-- 添加区域 -->
        <Modal title="添加区域" v-model="addAreaModal" :width="30" :mask-closable="false">
            <Form :model="areaInfo" :label-width="70">
                <FormItem label="区域">
                    <Select v-model="areaInfo.city" filterable multiple>
                        <Option :value="val.id" v-for="val in areaArr" :key="val.id">{{ val.name }}</Option>
                    </Select>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" size="large" long @click="addArea">确定</Button>
            </div>
        </Modal>

        <Modal title="地图" width="40" v-model="showMapModal" style="height: 200px;">
            <searchsite @getsitemsg="getsitemsgfun" :prefix="city_name"></searchsite>
        </Modal>
    </div>
</template>
  
<script>
import Paginate from "@/components/paginate/paginate.vue";
import MyUpload from "_c/my-upload"
import searchsite from '@/components/qqmap/searchsite'
export default {
    name: "auditList",
    components: {
        Paginate, MyUpload, searchsite
    },
    data() {
        return {
            searchData: {
                sort: "desc",
                order_by: "sort",
                page: 1,
                limit: 10
            },
            cityList: [],
            searchCityList: [],
            // 列表
            columns: [

                {
                    title: '姓名',
                    align: 'center',
                    key: 'username',
                    maxWidth: 120,
                },
                {
                    title: '手机号',
                    align: 'center',
                    maxWidth: 120,
                    key: 'mobile',
                },

                {
                    title: '城市',
                    align: 'center',
                    key: 'city_name',
                    maxWidth: 120,
                },
                {
                    title: '地址',
                    align: 'center',
                    key: 'address',
                },
                {
                    title: '车牌号',
                    align: 'center',
                    maxWidth: 120,
                    key: 'cart_number',
                },
                {
                    title: '教练状态',
                    align: 'center',
                    key: 'is_forbid',
                    maxWidth: 120,
                    render: (h, param) => {
                        let txt = '';
                        let color = '';
                        if (param.row.is_forbid == 1) {
                            txt = '不可接单';
                            color = 'red';
                        } else {
                            txt = '可接单';
                            color = 'blue'
                        }
                        return h('div', [
                            h('span', {
                                style: {
                                    color: color
                                }
                            }, txt),
                        ]);
                    },
                },

                {
                    title: '教练状态',
                    align: 'center',
                    key: 'status',
                    maxWidth: 120,
                    render: (h, param) => {
                        let txt = '';
                        let color = '';
                        if (param.row.status == 0) {
                            txt = '冻结';
                            color = 'red';
                        } else {
                            txt = '正常';
                            color = 'blue'
                        }
                        return h('div', [
                            h('span', {
                                style: {
                                    color: color
                                }
                            }, txt),
                        ]);
                    },
                },
                {
                    title: '注册时间',
                    align: 'center',
                    maxWidth: 155,
                    key: 'create_time',
                },
                {
                    title: '教练身份',
                    align: 'center',
                    maxWidth: 155,
                    key: 'user_type_txt',
                },
                {
                    title: '排序值',
                    align: 'center',
                    maxWidth: 90,
                    key: 'sort',
                },
                {
                    title: '操作',
                    align: 'center',
                    slot: 'makeSlot',
                    maxWidth: 230,
                },
            ],
            // 数据
            list: [],
            total: 0,
            // 编辑框
            editModal: false,
            formItem: {},
            showMapModal: false,
            addAreaModal: false,
            areaArr: [],
            areaInfo: {},
            city_name: '',
        }
    },
    methods: {
        getImg(items) {
            items.forEach(item => {
                this.formItem.cart_img = item.url;
            });
        },
        getImg0(items) {
            items.forEach(item => {
                this.formItem.avatar = item.url;
            });
        },
        getImg1(items) {
            items.forEach(item => {
                this.formItem.work_img = item.url;
            });
        },
        getImg2(items) {
            items.forEach(item => {
                this.formItem.id_card_front = item.url;
            });
        },
        getImg3(items) {
            items.forEach(item => {
                this.formItem.id_card_back = item.url;
            });
        },
        getImg4(items) {
            items.forEach(item => {
                this.formItem.drive_img = item.url;
            });
        },
        getImg5(items) {
            items.forEach(item => {
                this.formItem.travel_img = item.url;
            });
        },
        getList() {
            this.$axios('/admin/partner/getList', this.searchData).then(res => {
                this.list = res.data;
                this.total = res.total;
            });
        },
        search() {
            this.searchData.page = 1;
            this.getList();
        },
        reset() {
            this.searchData = {
                sort: "desc",
                order_by: "sort",
                page: 1,
                limit: 10
            }
            this.getList();
        },
        changePage(page) {
            this.searchData.page = page;
            this.getList();
        },
        changeSize(size) {
            this.searchData.limit = size;
            this.getList();
        },
        edit(row, is_detail) {
            if (row) {
                this.formItem = { ...row };
                this.formItem.is_detail = is_detail;
                this.formItem.birthday = this.formItem.birthday_txt;
                this.formItem.drive_time = this.formItem.drive_time_txt;
            } else {
                this.formItem = {
                    id: 0,
                    status: 1,
                    is_detail: is_detail,
                    user_type: 0,
                    shape: '轿车'
                };
            }
            this.getOpenCityList();
            this.editModal = true;
        },
        editModalOk() {
            this.$axios('/admin/partner/save', this.formItem).then(res => {
                this.$Message.success('执行成功');
                this.editModal = false;
                this.getList();
            });
        },
        status(id, type) {
            this.$Modal.confirm({
                title: type == 0 ? '禁止接单' : '可接单',
                content: "<p>您确定要修改该用户接单状态吗？</p>",
                onOk: () => {
                    this.$axios('/admin/partner/status', { id: id, type: type }).then(res => {
                        this.$Message.success('执行成功');
                        this.getList();
                    });
                },
                onCancel: () => {
                    this.$Message.info('取消操作');
                }
            });
        },
        del(id) {
            this.$Modal.confirm({
                title: '禁用',
                content: "<p>您确定要禁用该用户吗？</p>",
                onOk: () => {
                    this.$axios('/admin/partner/del', { id: id }).then(res => {
                        this.$Message.success('执行成功');
                        this.getList();
                    });
                },
                onCancel: () => {
                    this.$Message.info('取消操作');
                }
            });
        },
        cityChange(value) {
            if (value) {
                this.city_name = value.label;
            }
        },
        // 获取项目
        getOpenCityList() {
            this.$axios("/admin/config/getCityList").then(res => {
                this.cityList = res;
            });
        },
        getsitemsgfun(item) {
            this.formItem.address = item.address;
            this.formItem.lng = item.location.lng;
            this.formItem.lat = item.location.lat;
            // this.showMapModal = false;
        },
        area(cityId, userId) {
            this.areaInfo = {};
            this.$axios("/admin/partner/getAreaList", { city_id: cityId }).then(res => {
                this.areaArr = res;
            });
            this.$axios("/admin/partner/getUserArea", { partner_id: userId }).then(res => {
                this.areaInfo.city = res;
            });
            this.areaInfo.partner_id = userId;
            this.addAreaModal = true;
        },
        addArea() {
            this.$axios("/admin/partner/addArea", this.areaInfo).then(res => {
                this.$Message.success('执行成功');
                this.addAreaModal = false;
                this.getList();
            });
        },
        getCityList() {
            this.$axios('/admin/partner/city/getArr').then(res => {
                this.searchCityList = res;
            });
        },
    },
    created() {
        this.getList();
        this.getCityList();
    }
}
</script>
<style></style>
  